<template>
    <div class="hierarchyManage zy-content ">
      <Card title="" class="detail-content-layout">
        <Tree  ref="tree" v-if="data5 && data5.length" :data="data5" :render="renderContent"></Tree>
      </Card>
        <Modal :mask-closable="false"
            v-model="create"
            :title="addtitle"
            class="modal-content-layout"
            :loading="loading">
            <Form class="formList" ref="form" :model="formItem" label-position="top" :rules="ruleValidate">
                <FormItem :label="$t('名称')" prop="name">
                    <Input type="text" v-model="formItem.name" :placeholder="`${$t('common.inputInfo')}`" :maxlength="100"></Input>
                </FormItem>
                <div v-if="formItem.level!=1">
                    <FormItem :label="$t('父级')" prop="parentId">
                        <Select v-model="formItem.parentId" clearable :placeholder="`${$t('common.selectInfo')}`" :disabled="!formItem.id">
                            <Option v-for="(item,index) in parentIdArr" :value="item.id" :key="index">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </div>
                <FormItem :label="$t('排序')" prop="sort">
                    <Input type="text" v-model="formItem.sort" :placeholder="`${$t('common.inputInfo')}`" :maxlength="100"></Input>
                </FormItem>
                <FormItem :label="$t('外部系统编码')" prop="externalCode">
                    <Input type="text" v-model="formItem.externalCode" :placeholder="`${$t('common.inputInfo')}`" :maxlength="100"></Input>
                </FormItem>
                <FormItem label="oee目标值" prop="targetValue">
                    <InputNumber type="text" style="width:100%" v-model="formItem.targetValue" :placeholder="`${$t('common.inputInfo')}`" :maxlength="100"></InputNumber>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default"  @click="create = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary" :loading="loading"  @click="append('form')">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
         <Modal :mask-closable="false"
            v-model="delShowF"
            class="modal-title-layout"
            :title="$t('common.Delete')">
           <div class="icon red">
             <i class="iconfont zy-common-shanchu"></i>
           </div>
           <p class="title">
             <span>{{$t('common.confirmDelete')}}</span>
           </p>
            <div slot="footer">
                <Button type="default"  @click="delShowF = false">{{$t('common.Cancle')}}</Button>
                <Button type="primary"  @click="remove">{{$t('maintenance.Confirmed')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "hierarchyManage",
        data(){
            return{
              expandIds:[],
                parentIdArr:[],
                delShowF:false,
                create:false,
                addtitle:"",
                loading:false,
                formItem:{},
                addData:{},
                removeData:{},
                ruleValidate: {
                    name: [
                        { required: true, message: this.$t('common.inputInfo'), trigger: 'blur' }
                    ],
                    targetValue: [
                        { required: true,type:'number', message: this.$t('common.inputInfo'), trigger: 'blur' }
                    ],
                    parentId: [
                        { required: true,type: 'number', message: this.$t('common.selectInfo'), trigger: 'change' }
                    ],
                    sort: [
                        { required: true, message: this.$t('common.inputInfo'), trigger: 'blur' }
                    ]
                },
                data5: [
                    {
                        title: this.$t('所有层级'),
                        expand: true,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    fontSize:'18px'
                                }
                            },[
                                
                                h('span', [
                                    h('span', data.title)
                                ]),
                                h('span',[
                                    h('Button', {
                                        props: Object.assign({}, this.buttonProps, {
                                            icon: 'ios-add'
                                        }),
                                        style: {
                                            marginLeft: '8px',
                                            marginRight: '8px'
                                        },
                                        on: {
                                            click: () => { this.addClick(root, node,data) }
                                        }
                                    }),
                                ])
                            ]);
                        },
                        children: [
                            
                        ]
                    }
                ],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                }
            }
        },
        mounted(){
           this.getList();
           
        },
        methods:{
          getExpandId(){
            const nodes = this.$refs.tree.$data.flatState;
            let ids = [];
            for (let i=0;i<nodes.length;i++){
              if (nodes[i].node.expand && nodes[i].node.id){
                ids.push(nodes[i].node.id)
              }
            }
            this.expandIds = ids
          },
          setExpand(arr){
            for (let i=0;i<arr.length;i++){
              if(this.expandIds.includes(arr[i].id)){
                arr[i].expand = true
              }
              if (arr[i].children){
                this.setExpand(arr[i].children)
              }
            }
          },
            getParentMed(level){
                
                this.axios({
                    method:'get',
                    url: "/basic/organization/getOrgByLevelAndType",
                    params:{
                        level:level
                    }
                }).then(res=>{
                    if(res.code===200){
                        this.parentIdArr  = res.data
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                });
            },
            getList(){
                 this.axios({
                    method:'get',
                    url: "/basic/organization/findList",
                    params:{

                    }
                }).then(res=>{
                    if(res.code===200){
                      let data = res.data;
                      this.setExpand(data)
                        this.data5[0].children  = data
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                });
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                        width: '100%',
                        fontSize:'15px'
                    }
                }, [
                    h('span', [
                        h('span', data.name)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            // float: 'right',
                            // marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-add'
                            }),
                            style: {
                                marginLeft: '8px',
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.addClick(root, node,data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { this.removeClick(root, node, data) }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-create-outline'
                            }),
                            on: {
                                click: () => { this.addClick(root, node,data, 1) }
                            }
                        })

                    ])
                ]);
            },
            addClick(root, node,data,type){
                this.$refs.form.resetFields();
                if(type === 1){
                    this.addtitle =`${this.$t('common.Edit')}`
                    this.formItem={
                        id:data.id,
                        name:data.name,
                        level:data.level,
                        sort:data.sort.toString(),
                        externalCode: data.externalCode,
                        targetValue: data.targetValue,
                    }
                    if(data.level){
                        this.formItem.level = data.level
                        if(data.level!=1){
                            this.axios({
                                method:'get',
                                url: "/basic/organization/getOrgByLevelAndType",
                                params:{
                                    level:data.level-1
                                }
                            }).then(res=>{
                                if(res.code===200){
                                    this.parentIdArr  = res.data
                                    this.formItem.parentId =data.parentId
                                }else{
                                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                                }
                            });
                        }  
                    }else{
                        this.formItem.level = 1
                    }
                }else{
                    this.addtitle =`${this.$t('common.New')}`
                    this.formItem={
                        targetValue:null,
                        // parentId : data.id
                    }
                    if(data.level){
                        this.formItem.level = data.level+1
                        this.axios({
                            method:'get',
                            url: "/basic/organization/getOrgByLevelAndType",
                            params:{
                                level:data.level
                            }
                        }).then(res=>{
                            if(res.code===200){
                                this.parentIdArr  = res.data
                                this.formItem.parentId =data.id
                            }else{
                                this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                            }
                        });
                    }else{
                        this.formItem.level = 1
                    }
                    
                }
                this.create = true
                this.addData = data
            },
            append (name) {
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        return
                    } else {
                        this.loading = true
                        this.getExpandId()
                        if(this.formItem.id){
                            this.axios({
                                method:'post',
                                url: "/basic/organization/update",
                                data:this.formItem
                            }).then(res=>{
                                this.loading = false
                                if(res.code===200){
                                    this.$Message.success(res.data)
                                    this.getList();
                                    this.create = false
                                }else{
                                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                                }
                            });
                        }else{
                            this.axios({
                                method:'post',
                                url: "/basic/organization/insert",
                                data:this.formItem
                            }).then(res=>{
                                this.loading = false
                                if(res.code===200){
                                    this.$Message.success(res.data)
                                    this.getList();
                                    this.create = false
                                }else{
                                    this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                                }
                            });
                        }
                    }
                })
                
                
                
            },
            //删除弹窗
            removeClick(root, node, data){
                this.delShowF = true
                this.removeData.root = root
                this.removeData.node = node
                this.removeData.data = data
            },
            //删除确认
            remove () {
                let root,node,data;
                root=this.removeData.root
                node=this.removeData.node
                data=this.removeData.data
              this.getExpandId()
                this.axios({
                    method:'post',
                    url: "/basic/organization/delete",
                    data:{
                        ids:[data.id]
                    }
                }).then(res=>{
                    if(res.code===200){
                        this.$Message.success(res.data)
                        this.delShowF = false
                        this.getList();
                    }else{
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                    }
                });       
            }
        }
    }
</script>

<style scoped lang="scss">
    .hierarchyManage{
        font-size: 15px;
       .enableContent{
            padding-top: 86px;
            .enableContentInner{
                text-align: center;
                margin-bottom: 40px;
            }
            .enableTips{
                text-align: center;
                span{
                    font-size: 16px;
                    color: #ff2b4e;
                }
            }
        }
        
    }
</style>

<style lang="scss">
    .enableContent{
            padding-top: 86px;
            .enableContentInner{
                text-align: center;
                margin-bottom: 40px;
            }
            .enableTips{
                text-align: center;
                span{
                    font-size: 16px;
                    color: #ff2b4e;
                }
            }
        }        
    
</style>
